<template>
  <div class="statistics-content statistics-1">
    <div style=" display:flex;flex-direction: row;height: 70%;width: 100%"  class="statistics-1">
      <div class="grid grid-left" style="width: 40%">
        <div class="statistics-block" style="height: 100%">
          <BlockItem class="max" title="全市重点企业汇总" style="margin-top: 10px"></BlockItem>
          <div style="display: flex;">
            <div style="width: 25%">
              <div v-for="item in numberData" :key="item.id" style="margin-top: 40px;margin-left: 10px;cursor: pointer" @click="oppenCk(item.id,item.name,item.number,item.count,item.containName)" >
                <span style="font-size: 18px;color: #ffffff"> {{item.name}}:</span>
                <span style="font-size: 20px;color: #fa5f04"> {{item.number}}</span>
                <span style="font-size: 18px;color: #ffffff"> 家</span>
                <br>
                <span style="font-size: 16px;color: #ffffff"> {{item.containName}}</span>
              </div>
            </div>
            <div id="map" style="height: 600px; width: 70%"></div>
          </div>
        </div>
      </div>
      <div class="grid grid-right" style="display: flex;width: calc(60% - 5px)">
        <div class="statistics-block" style="height: 100%; margin-left: 20px;width: calc(50% - 5px)">
          <BlockItem class="max" title="全市重点企业缺工top10" style="margin-top: 10px"></BlockItem>
          <div class="rank-block1" style="text-align: center">
            <div class="rank-item head">
              <div class="col-item rank">序号</div>
              <div class="col-item name">企业名称</div>
              <div class="col-item count">岗位名称</div>
              <div class="col-item count">需求量</div>
              <div class="col-item count">投递简历数</div>
              <div class="col-item count">缺口</div>
            </div>
            <div v-for="(item,index) in notWorkData" :key="item.id"  style="cursor: pointer">
              <div class="rank-item body" :style="index%2==0?'background-color: #16205F':''">
                <div class="col-item rank" >{{item.id}}</div>
                <div class="col-item name" :title="item.entName">{{item.entName}}</div>
                <div class="col-item count" :title="item.jobName">{{item.jobName}}</div>
                <div class="col-item count">{{item.demandCount}}</div>
                <div class="col-item count">{{item.deliver}}</div>
                <div class="col-item count" style="color:#F8B469;">{{item.gap}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="statistics-block" style="height: 100%; margin-left: 20px;width: calc(50% - 10px)">
          <BlockItem class="max" title="全市重点企业缺工岗位薪资分析" style="margin-top: 10px"></BlockItem>
          <div class="rank-block1" style="text-align: center">
            <div class="rank-item head">
              <div class="col-item rank">序号</div>
              <div class="col-item name">企业名称</div>
              <div class="col-item count">岗位名称</div>
              <div class="col-item count">发布薪资</div>
              <div class="col-item count">期望平均薪资</div>

            </div>
            <div v-for="(item,index) in wagesData" :key="item.id"  style="cursor: pointer">
              <div class="rank-item body" :style="index%2==0?'background-color: #16205F':''">
                <div class="col-item rank" >{{item.id}}</div>
                <div class="col-item name" :title="item.entName">{{item.entName}}</div>
                <div class="col-item count" :title="item.jobName">{{item.jobName}}</div>
                <div class="col-item count">{{item.demandCount}}</div>
                <div class="col-item count">{{item.deliver}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: calc(30% - 20px); margin-top: 20px; width: 100%">
      <div class="grid grid-right" style="display: flex; width: 100%">
        <div class="statistics-block" style="height: 100%;width: calc(33% - 10px)">
          <BlockItem class="max" title="重点企业热门岗位" style="margin-top: 10px"></BlockItem>
          <div class="rank-block" style="text-align: center">
            <div class="rank-item head">
              <div class="col-item rank">序号</div>
              <div class="col-item count">企业名称</div>
              <div class="col-item type">岗位名称</div>
              <div class="col-item time">需求量</div>
              <div class="col-item count">薪资</div>
              <div class="col-item count">缺口</div>
              <div class="col-item count">缺口率</div>
            </div>
            <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave" style="overflow: hidden;">
              <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
                <div id="scrollItemBox">
                  <div v-for="(item,index) in unitRank" :key="index" >
                    <div class="rank-item body" :style="index%2==0?'background-color: #16205F':''">
                      <div class="col-item rank"  >{{item.id}}</div>
                      <div class="col-item count" >{{item.entName?item.entName:'暂无'}}</div>
                      <!--                      <div class="col-item type" v-if="item.helpTypeText=='平台'" >{{item.helpTypeText?item.helpTypeText:'暂无'}}</div>-->
                      <div class="col-item type"  >{{item.jobName?item.jobName:'暂无'}}</div>
                      <div class="col-item type"  >{{item.demandCount?item.demandCount:'暂无'}}</div>
                      <div class="col-item time" >{{item.salary?item.salary:'暂无'}}</div>
                      <div class="col-item count" style="color:#F8B469;text-align: center;width: 120px;" >{{item.gap?item.gap:'暂无'}}</div>
                      <div class="col-item count" :style="item.gap/item.demandCount>='0.5'?'color:red':''" style="text-align: center">{{((item.gap/item.demandCount).toFixed(2))*100}}%</div>

                    </div>
                  </div>
                </div>
                <div v-html="copyHtml"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="statistics-block" style="height: 100%; margin-left: 20px;width: calc(33% - 10px)">
          <BlockItem class="max" title="全市重点招商引资企业缺工情况" style="margin-top: 10px"></BlockItem>
          <div class="rank-block" style="text-align: center">
            <div class="rank-item head">
              <div class="col-item rank">序号</div>
              <div class="col-item count">企业名称</div>
              <div class="col-item type">岗位名称</div>
              <div class="col-item time">需求量</div>
              <div class="col-item count">投递简历数</div>
              <div class="col-item count">缺口</div>
              <div class="col-item count">缺口率</div>
            </div>
            <div class="scroll_parent_box" @mouseenter="mEnter1" @mouseleave="mLeave1" style="overflow: hidden;">
              <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop1}px)` }">
                <div id="scrollItemBox">
                  <div v-for="(item,index) in unitRank1" :key="index">
                    <div class="rank-item body" :style="index%2==0?'background-color: #16205F':''">
                      <div class="col-item rank"  >{{item.id}}</div>
                      <div class="col-item count" >{{item.entName?item.entName:'暂无'}}</div>
                      <!--                      <div class="col-item type" v-if="item.helpTypeText=='平台'" >{{item.helpTypeText?item.helpTypeText:'暂无'}}</div>-->
                      <div class="col-item type"  >{{item.jobName?item.jobName:'暂无'}}</div>
                      <div class="col-item type"  >{{item.demandCount?item.demandCount:'暂无'}}</div>
                      <div class="col-item time" >{{item.deliver?item.deliver:'暂无'}}</div>
                      <div class="col-item count" style="color:#F8B469;text-align: center;width: 120px;" >{{item.gap?item.gap:'暂无'}}</div>
                      <div class="col-item count" :style="item.gap/item.demandCount>='0.5'?'color:red':''" style="text-align: center">{{((item.gap/item.demandCount).toFixed(2))*100}}%</div>

                    </div>
                  </div>
                </div>
                <div v-html="copyHtml"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="statistics-block" style="height: 100%; margin-left: 20px;width: calc(33% - 6px)">
          <BlockItem class="max" title="全市纳税等级A级企业缺工情况" style="margin-top: 10px"></BlockItem>
          <div class="rank-block" style="text-align: center">
            <div class="rank-item head">
              <div class="col-item rank">序号</div>
              <div class="col-item count">企业名称</div>
              <div class="col-item type">岗位名称</div>
              <div class="col-item time">需求量</div>
              <div class="col-item count">投递简历数</div>
              <div class="col-item count">缺口</div>
              <div class="col-item count">缺口率</div>
            </div>
            <div class="scroll_parent_box" @mouseenter="mEnter2" @mouseleave="mLeave2" style="overflow: hidden;">
              <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop2}px)` }">
                <div id="scrollItemBox">
                  <div v-for="(item,index) in unitRank2" :key="index">
                    <div class="rank-item body" :style="index%2==0?'background-color: #16205F':''">
                      <div class="col-item rank"  >{{item.id}}</div>
                      <div class="col-item count" >{{item.entName?item.entName:'暂无'}}</div>
                      <!--                      <div class="col-item type" v-if="item.helpTypeText=='平台'" >{{item.helpTypeText?item.helpTypeText:'暂无'}}</div>-->
                      <div class="col-item type"  >{{item.jobName?item.jobName:'暂无'}}</div>
                      <div class="col-item type"  >{{item.demandCount?item.demandCount:'暂无'}}</div>
                      <div class="col-item time" >{{item.deliver?item.deliver:'暂无'}}</div>
                      <div class="col-item count" style="color:#F8B469;text-align: center;width: 120px;" >{{item.gap?item.gap:'暂无'}}</div>
                      <div class="col-item count" :style="item.gap/item.demandCount>='0.5'?'color:red':''" style="text-align: center">{{((item.gap/item.demandCount).toFixed(2))*100}}%</div>


                    </div>
                  </div>
                </div>
                <div v-html="copyHtml"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Modal v-if="showMore" @closeModal="showMore=false" :title="title"  width="1200px" height="400px">
      <CoverCom9 :title="title" :id="areaId" :oncloseDialog="oncloseDialog" :countList="countList"></CoverCom9>
    </Modal>
    <Modal v-if="isShow" @closeModal="isShow=false" :title="title"  width="1200px" height="400px">
      <CoverCom :title="entName" :id="entId" :oncloseDialog2="oncloseDialog2" ></CoverCom>
    </Modal>
  </div>
</template>

<script>
import CoverCom9 from "@/components/Cover/CoverCom-9";
import BlockItem from "@/components/BlockItem/BlockItem";
import CoverCom from "@/components/Cover/CoverCom-10";

export default {
  name: "Statistics-12",
  components: {BlockItem,CoverCom9,CoverCom},
  data(){
    return{
      entName: '',
      isShow: false,
      entId: 0,
      emphasisPartyModal:{
        show:false,
        title:'',
        page:1,
        limit:20,
        total:10,
      },
      List1:[],
      List2:[],
      List3:[],
      list1Loadng:false,
      list2Loadng:false,
      list3Loadng:false,
      unitRank:[  {id:1,entName:'甘肃恒亚水泥有限公司',jobName:'水暖维修工',demandCount: 10,salary: '3000-5000',gap: 10,gaps:'100%'},
        {id:2,entName:'阿克塞县鸿翔矿业有限责任公司',jobName:'操作工',demandCount: 20,salary: '4000-9000',gap: 1,gaps:'95%'},
        {id:3,entName:'阿克塞哈萨克族自治县恒立新石英材料有限公司',jobName:'司机',demandCount: 20,salary: '6000-7000',gap: 0,gaps:'100%'},
        {id:4,entName:'酒泉兴安民爆器材有限公司',jobName:'熟练操作工',demandCount: 15,salary: '7000-10000',gap: 0,gaps:'100%'},
        {id:5,entName:'甘肃华电福新能源有限公司阿克塞分公司',jobName:'玉门东镇招聘保洁一名',demandCount: 1,salary: '2000-4000',gap: 0,gaps:'100%'},
        {id:6,entName:'中能桑普阿克塞县科技有限公司',jobName:'司炉，中控，上煤，装载机驾驶员',demandCount: 92,salary: 1000,gap: 0,gaps:'100%'},
        {id:7,entName:'阿克塞正泰光伏发电有限公司',jobName:'生产工人',demandCount: 3,salary: '5000-6000',gap: 0,gaps:'100%'},
        {id:8,entName:'陆泰20万千瓦光伏发电项目',jobName:'机修工',demandCount: 3,salary: '3000-4000',gap: 0,gaps:'100%'},
        {id:9,entName:'润金15万千瓦风电项目润金新能源15万千瓦风电项目',jobName:'车间副主任',demandCount: 3,salary: '8000-10000',gap: 0,gaps:'100%'},
        ],

      unitRank1:[  {id:1,entName:'甘肃恒亚水泥有限公司',jobName:'前端开发',demandCount: 30,deliver: 18,gap: 12,gaps:'27%'},
        {id:2,entName:'阿克塞县鸿翔矿业有限责任公司',jobName:'java开发',demandCount: 20,deliver: 11,gap: 9,gaps:'27%'},
        {id:3,entName:'阿克塞哈萨克族自治县恒立新石英材料有限公司',jobName:'现场操作',demandCount: 20,deliver: 13,gap: 7,gaps:'27%'},
        {id:4,entName:'酒泉兴安民爆器材有限公司',jobName:'销售顾问',demandCount: 50,deliver: 44,gap: 6,gaps:'27%'},
        {id:5,entName:'甘肃华电福新能源有限公司阿克塞分公司',jobName:'电池组件操作工',demandCount: 10,deliver: 4,gap: 6,gaps:'27%'},
        {id:6,entName:'中能桑普阿克塞县科技有限公司',jobName:'数据标注员',demandCount: 15,deliver: 10,gap: 5,gaps:'27%'},
        {id:7,entName:'阿克塞正泰光伏发电有限公司',jobName:'财务助理',demandCount: 10,deliver: 5,gap: 5,gaps:'27%'},
        {id:8,entName:'陆泰20万千瓦光伏发电项目',jobName:'客服',demandCount: 20,deliver: 16,gap: 4,gaps:'27%'},
        {id:9,entName:'润金15万千瓦风电项目润金新能源15万千瓦风电项目',jobName:'出纳',demandCount: 8,deliver: 4,gap: 4,gaps:'27%'},
        ],

      unitRank2:[  {id:1,entName:'甘肃恒亚水泥有限公司',jobName:'前端开发',demandCount: 30,deliver: 18,gap: 12,gaps:'27%'},
        {id:2,entName:'阿克塞县鸿翔矿业有限责任公司',jobName:'java开发',demandCount: 20,deliver: 11,gap: 9,gaps:'27%'},
        {id:3,entName:'阿克塞哈萨克族自治县恒立新石英材料有限公司',jobName:'现场操作',demandCount: 20,deliver: 13,gap: 7,gaps:'27%'},
        {id:4,entName:'酒泉兴安民爆器材有限公司',jobName:'销售顾问',demandCount: 50,deliver: 44,gap: 6,gaps:'27%'},
        {id:5,entName:'甘肃华电福新能源有限公司阿克塞分公司',jobName:'电池组件操作工',demandCount: 10,deliver: 4,gap: 6,gaps:'27%'},
        {id:6,entName:'中能桑普阿克塞县科技有限公司',jobName:'数据标注员',demandCount: 15,deliver: 10,gap: 5,gaps:'27%'},
        {id:7,entName:'阿克塞正泰光伏发电有限公司',jobName:'财务助理',demandCount: 10,deliver: 5,gap: 5,gaps:'27%'},
        {id:8,entName:'陆泰20万千瓦光伏发电项目',jobName:'客服',demandCount: 20,deliver: 16,gap: 4,gaps:'27%'},
        {id:9,entName:'润金15万千瓦风电项目润金新能源15万千瓦风电项目',jobName:'出纳',demandCount: 8,deliver: 4,gap: 4,gaps:'27%'},],
      copyHtml: '', //复制多一份防止滚动到后面出现空白
      scrollTop: 0, //列表滚动高度    }
      scrollTop1: 0, //列表滚动高度    }
      scrollTop2: 0, //列表滚动高度    }
      fairActive:1,
      closeDialog: false,
      fatherId: 0,
      title:'',
      areaId:'',
      moreType:1,
      showMore:false,
      chart1Active:1,
      chart2Active:1,
      chart3Active:1,
      chart4Active:1,
      chart5Active:1,
      countList:[],
      name: '重点企业用工情况',
      numberData:[

        {id:2,name:'阿克旗乡',number:12,count: 10,containName:""},
        {id:3,name:'红柳湾镇',number:11,count: 32,containName:""},
        {id:4,name:'阿勒腾乡',number:8,count: 63,containName:""},
],

      notWorkData:[
        {id:1,entName:'甘肃恒亚水泥有限公司',jobName:'司炉，中控，上煤，装载机驾驶员，电工，环保设施巡检',demandCount: 92,deliver: 51,gap: 41},
        {id:2,entName:'阿克塞县鸿翔矿业有限责任公司',jobName:'操作工',demandCount: 60,deliver: 32,gap: 28},
        {id:3,entName:'阿克塞哈萨克族自治县恒立新石英材料有限公司',jobName:'操作工',demandCount: 20,deliver: 13,gap: 7},
        {id:4,entName:'酒泉兴安民爆器材有限公司',jobName:'司机',demandCount: 20,deliver: 8,gap: 12},
        {id:6,entName:'甘肃华电福新能源有限公司阿克塞分公司',jobName:'维修工（含电工/焊工）；换热站巡检人员。',demandCount: 19,deliver: 10,gap: 9},
        {id:5,entName:'中能桑普阿克塞县科技有限公司',jobName:'汉鑫科技招聘铆焊工，操作工（技工普工），',demandCount: 18,deliver: 8,gap: 10},
        {id:7,entName:'阿克塞正泰光伏发电有限公司',jobName:'出炉工',demandCount: 15,deliver: 10,gap: 5},
        {id:8,entName:'陆泰20万千瓦光伏发电项目',jobName:'生产操作工',demandCount: 10,deliver: 6,gap: 4},
        {id:9,entName:'润金15万千瓦风电项目润金新能源15万千瓦风电项目',jobName:'水暖维修工',demandCount: 10,deliver: 4,gap: 6},
      ],
      wagesData:[
        {id:1,entName:'甘肃恒亚水泥有限公司',jobName:'司炉，中控，上煤，装载机驾驶员，电工，环保设施巡检',demandCount: 3000,deliver: 4500},
        {id:2,entName:'阿克塞县鸿翔矿业有限责任公司',jobName:'操作工',demandCount: 6000,deliver: 7500},
        {id:3,entName:'阿克塞哈萨克族自治县恒立新石英材料有限公司',jobName:'操作工',demandCount: 9000,deliver: 10000},
        {id:4,entName:'酒泉兴安民爆器材有限公司',jobName:'司机',demandCount: 7000,deliver: 8500},
        {id:6,entName:'甘肃华电福新能源有限公司阿克塞分公司',jobName:'维修工（含电工/焊工）；换热站巡检人员。',demandCount: 3000,deliver: 4000},
        {id:5,entName:'中能桑普阿克塞县科技有限公司',jobName:'汉鑫科技招聘铆焊工，操作工（技工普工），',demandCount: 9000,deliver: 9500},
        {id:7,entName:'阿克塞正泰光伏发电有限公司',jobName:'出炉工',demandCount: 8000,deliver: 9500},
        {id:8,entName:'陆泰20万千瓦光伏发电项目',jobName:'生产操作工',demandCount: 8000,deliver: 8500},
        {id:9,entName:'润金15万千瓦风电项目润金新能源15万千瓦风电项目',jobName:'水暖维修工',demandCount: 5000,deliver: 6000},
      ],
      list:[]
    }
  },
  methods: {
    oppenCk(id,name,number,count,containName){

      this.showMore = true
      this.areaId = id
      this.title = name+":共"+number+"家企业"+containName+'，'
      this.moreType=2;
    },
    oncloseDialog2(){
      this.isShow = false
    },
    getEmphasisPartyModal(item){
      this.isShow = true
      this.entName = item.entName
    },
    mEnter() {
      clearInterval(this.timer);
    },
    // 鼠标移出继续滚动
    mLeave() {
      this.startScroll()
    },
    initScroll() {
      this.$nextTick(() => {
        this.startScroll()
      })
    },
    // 开始滚动
    startScroll() {
      this.timer = setInterval(this.scroll, 35);
    },
    // 滚动处理方法
    scroll() {
      this.scrollTop++
      // 获取需要滚动的盒子的高度
      let scrollItemBox = document.getElementById("scrollItemBox").offsetHeight
      // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
      if (this.scrollTop >= scrollItemBox) {
        this.scrollTop = 0
      }
    },
    mEnter1() {
      clearInterval(this.timer1);
    },
    // 鼠标移出继续滚动
    mLeave1() {
      this.startScroll1()
    },
    initScroll1() {
      this.$nextTick(() => {
        this.startScroll1()
      })
    },
    // 开始滚动
    startScroll1() {
      this.timer1 = setInterval(this.scroll1, 35);
    },
    // 滚动处理方法
    scroll1() {
      this.scrollTop1++
      // 获取需要滚动的盒子的高度
      let scrollItemBox = document.getElementById("scrollItemBox").offsetHeight
      // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
      if (this.scrollTop1 >= scrollItemBox) {
        this.scrollTop1 = 0
      }
    },
    mEnter2() {
      clearInterval(this.timer2);
    },
    // 鼠标移出继续滚动
    mLeave2() {
      this.startScroll2()
    },
    initScroll2() {
      this.$nextTick(() => {
        this.startScroll2()
      })
    },
    // 开始滚动
    startScroll2() {
      this.timer2 = setInterval(this.scroll2, 35);
    },
    // 滚动处理方法
    scroll2() {
      this.scrollTop2++
      // 获取需要滚动的盒子的高度
      let scrollItemBox = document.getElementById("scrollItemBox").offsetHeight
      // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
      if (this.scrollTop2 >= scrollItemBox) {
        this.scrollTop2 = 0
      }
    },
    oncloseDialog(e)
    {
      this.showMore = false
      this.fatherId = e
    },
    close(){
      this.closeDialog = false
    },
    initMap() {
      let myCharts = this.$echarts.init(document.getElementById('map'));
      this.$axios.get('/static/js/dh_json.json').then((res) => {
        this.$echarts.registerMap('jqsMap', res.data);
        let option = {
          xAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          yAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          series:[
            {
              map: "jqsMap",
              center: [94.27339,38.752445],
              type: 'map',
              top: 200,
              zoom: 1, //当前视角的缩放比例
              roam: true, //是否开启平游或缩放
              scaleLimit: { //滚轮缩放的极限控制
                min: 1,
                max: 100
              },
              width: 420,
              markPoint:{
                symbolSize:25,
                itemStyle:{
                  color:'#B03A5B'
                },
                label:{
                  normal:{
                    formatter(e){
                      return e.data.name
                    },
                    fontSize:'12',
                    show:true,
                    color:'#c7c7c7',
                    position:'top',
                  }
                },
                data:[]
              },
              data:[
                {id:2,name:'肃州区',number:123,count: 10,containName:"(含经开区70家)"},
                {id:3,name:'金塔县',number:36,count: 32},
                {id:4,name:'瓜州县',number:78,count: 63},
                {id:5,name:'敦煌市',number:32,count: 31},
                {id:6,name:'玉门市',number:92,count: 55},
                {id:7,name:'阿克塞县',number:9,count: 9},
                {id:8,name:'肃北县',number:32,count: 25}, ],
              label: {
                show: true,
                fontSize: "14",
                color: "#fff"
              },
              itemStyle: {
                borderColor: "#058eb8",
                areaColor: "rgba(17,74,112,0.2)",
                borderWidth: 1,
                shadowBlur: 2,
                shadowColor: "#0f2652",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "14",
                  color: "#fff"
                },
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                }
              },
              select:{
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                },
                label: {
                  show: true,
                  fontSize: "14",
                  color: "#fff"
                }
              }
            }
          ]
        }
        myCharts.on('click',(e)=>{
          if(e.componentSubType=='map'){
            this.showMore = true
            this.areaId = e.data.id
            this.title =  e.data.name+":共"+ e.data.number+"家企业"+ e.data.containName+'，'
            this.moreType=2;
          }
        })
        myCharts.setOption(option)
      })
    },

  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    this.initMap();
    this.initScroll()
    this.initScroll1()
    this.initScroll2()

  }
}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 2px solid #05548A;
.emphasis-party-list{
  width: 100%;
  overflow-y: auto;
  height: calc(100% - 50px);
  .table-row{
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    .table-col{
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
    }
  }
  .table-row:nth-child(even){
    background: #0c1d2f;
  }
}
.emphasis-party-list.list-1{
  .table-col.number{
    width: 16%;
  }
  .table-col.name{
    width: 16%;
  }
  .table-col.gender{
    width:16%;
  }
  .table-col.birthday{
    width: 16%;
  }
  .table-col.partyTime{
    width: 16%;
  }
  .table-col.position{
    width: 16%;
  }
  .table-col.cause{
    width: 16%;
  }
  .table-col.phone{
    width: 16%;
  }
}
.emphasis-party-list.list-2{
  .table-col.number{
    width: 20%;
  }
  .table-col.name{
    width: 40%;
  }
  .table-col.gender{
    width:40%;
  }

}
.emphasis-party-list.list-3{
  .table-col.number{
    width: 10%;
  }
  .table-col.name{
    width: 44%;
  }
  .table-col.gender{
    width:16%;
  }
  .table-col.birthday{
    width: 10%;
  }
  .table-col.partyTime{
    width: 20%;
  }
}
.scroll_parent_box {
  height: 136px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 10px;
}
.statistics-content {
  width: calc(100% - 40px);
  margin: 0 auto;
  margin-top: 20px;
  height: calc(100% - 140px);
  padding: 0 10px;
  .chart {
    width: 100%;
    height: 100%;
  }

  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }

  .statistics-block {
    padding: 10px;
    position: relative;
    border: $border;
    //box-shadow: $boxshadow;
    border-radius: 10px;
    background: #0A1456;
    .tab-block{
      position: absolute;
      top: 17px;
      right: 20px;
      display: flex;
      align-items: center;
      height: 30px;
      z-index: 3;
      .tab:first-child{
        border-radius: 5px 0 0 5px;
      }
      .tab:last-child{
        border-radius: 0 5px 5px 0;
      }
      .tab1{
        cursor: pointer;
        height: 100%;
        padding: 0 15px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #46A9FF;
        font-size: 14px;
        border-radius: 30px;
        .export{
          width: 12px;
          margin-right: 5px;
        }
      }
      .tab{
        cursor: pointer;
        height: 100%;
        padding: 0 15px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #46a9ff;
        font-size: 14px;

      }
      .tab.active{
        background: #46a9ff;
      }
    }
  }
}

.statistics-content {

  flex-direction: row;

  .grid {
    height: 100%;
    width: calc(50% - 5px);
  }

  .grid.grid-left,.grid.grid-right {
    .rank-block1{
      display: flex;
      flex-direction: column;
      padding-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .rank-item{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        .col-item{
          display: flex;
          align-items: center;
          color: #fff;
          padding: 0 5px;
        }
        .col-item.rank{
          width: 10%;
          justify-content: center;
        }
        .col-item.name{
          width:25%;
          margin-left: 20px;
          justify-content: flex-start;
          display: block;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          font-size: 14px;
        }
        .col-item.count{
          width:25%;
          justify-content: flex-start;
          display: block;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          font-size: 14px;
        }
      }
      .rank-item.head{
        height: 40px;
        /* margin-bottom: 5px; */
        background-color: #232C67;
        .col-item{
          justify-content: center;
          font-size: 16px;
        }
        .col-item.name{
          justify-content: flex-start;
        }
      }
      .rank-item.body{
        height: 50px;
        margin-bottom: 10px;
        .col-item.rank.background{
          background: #F36838;
          margin: 0 12.5px;
          width: 25px;
          height: 25px;
          border-radius: 4px;
          font-size: 14px;
        }
      }
      .rank-item.body:last-child{
        margin-bottom: 0;
      }
    }
    .rank-block{
      display: flex;
      flex-direction: column;
      padding-top: 5px;
      //overflow: hidden;
      //text-overflow: ellipsis;
      //white-space: nowrap;
      .rank-item{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        .col-item{
          display: flex;
          align-items: center;
          color: #fff;
          padding: 0 2px;
        }
        .col-item.rank{
          width:130px;
          display: flex;
          justify-content: center;
          font-size: 13px;
        }
        .col-item.name{
          width: calc(100% - 150px);
          margin-left: 10px;
          justify-content: flex-start;
          display: block;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .col-item.type{
          width: 130px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          font-size: 13px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .col-item.time{
          width: 160px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          font-size: 13px;
        }

        .col-item.count{
          width:180px;
          font-size: 13px;
          justify-content: flex-start;
          display: block;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;

        }
      }
      .rank-item.head{
        height: 45px;
        /* margin-bottom: 5px; */
        background-color: #232C67;
        padding-left: 10px;
        .col-item{
          justify-content: center;
          font-size: 15px;
        }
        .col-item.name{
          justify-content: flex-start;
        }
      }
      .rank-item.body{
        min-height: 45px;
        margin-bottom: 10px;
        .col-item.rank.background{
          background: #F36838;
          margin: 0 12.5px;
          width: 25px;
          height: 25px;
          border-radius: 4px;
          font-size: 14px;
        }
      }
      .rank-item.body:last-child{
        margin-bottom: 0;
      }
    }
    .info-item{
      height: calc(100% - 40px);
      display: flex;
      flex-direction: column;
      // overflow: hidden;
      .info-list{
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #025A8B;
        margin-bottom: 12px;
        .sort{
          color: #ffffff;
          margin-left: 10px;
          font-size: 16px;
          width: 50px;
          height: 100%;
          background: url("/static/u6817.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .name{
          color: #ffffff;
          font-size: 15px;
          width: 60px;
          margin-right: 13px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .rise{
          width: 16px;
          height: 18px;
        }
        .line{
          color: #ffffff;
          width: 2px;
          height: 16px;
          border-radius: 10px;
          background-image: linear-gradient(#115F8D, #fff,#115F8D);
          margin: 0 10px;
        }
        .percentage-item{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 2px;
          .percentage{
            color: #ffffff;
            font-size: 9px;
          }
        }
        .count{
          color: #ffffff;
          width: 52px;
          height: 100%;
          background-image: url("/static/top3.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .count1{
          color: #ffffff;
          width: 50px;
          height: 100%;
          background-image: url("/static/top4.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .count2{
          color: #ffffff;
          width: 50px;
          height: 100%;
          background-image: url("/static/top1.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .count3{
          color: #ffffff;
          width: 50px;
          height: 100%;
          background-image: url("/static/top2.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

      }
    }
  }
  .grid.grid-center{
    width: calc(100%/2);
    padding:0 20px;
    .statistics-block{
      width: 100%;
      height: calc(100%/3 - 20px);
      margin-top: 20px;
    }
  }
  .statistics-block{
    width: 100%;
    height: calc(50% - 10px);
    margin-bottom: 20px;
    .chart{
      width: 100%;
      height: calc(100% - 30px);
    }
  }
  .statistics-block:last-child{
    margin-bottom: 0;
  }
  .map-block{
    width: 100%;
    height: calc(100%/3*2);
    position: relative;
    #map{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .number-block{
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 90px;
      .number-item{
        width: calc((100% - 90px)/4);
        margin-right: 30px;
      }
      .number-item:last-child{
        margin-right: 0;
      }
    }
  }
}
</style>
